<template>
  <div class="storeManagement">
    <header>
      <span>店铺管理</span>
      <el-button type="text" @click="open">添加店铺</el-button>
    </header>
    <!-- 店铺展示管理 -->
    <div class="storeInfor">
      <!-- 表单区 -->
      <div class="tableC">
        <el-table
          ref="tableDataRef"
          :data="
            data.tableData.slice(
              (data.currentPage - 1) * data.pagesize,
              data.currentPage * data.pagesize
            )
          "
          stripe
          style="width: 100%"
          @selection-change=""
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            prop="title"
            label="商家"
            width="180"
            class="busPerson"
          />
          <el-table-column
            prop="address"
            label="地址"
            class="busAddress"
            width="300px"
          />
          <el-table-column prop="score" label="评分" width="100px" />
          <el-table-column prop="monthlySales" label="月销量" width="100px" />
        </el-table>
        <el-pagination
          class="fy"
          layout="prev, pager, next"
          @current-change="data.current_change"
          :total="data.total"
          background
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>


<script lang="ts">
import { reactive } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const data = reactive({
      total: 20, //默认数据总数
      pagesize: 8, //每页的数据条数
      currentPage: 1, //默认开始页面
      chageList: [],
      tableData: [],
    });

    function getdata() {
      axios({
        method: "get",
        url: "http://120.76.246.120:4455/Hapi/home",
      }).then((res) => {
        data.tableData = res.data.data;
        console.log(res.data.data);
      });
    }
    getdata();
    // 点击弹出添加框
    function open() {
      router.push({
        name: "addform",
      });
    }
    return {
      data,
      open,
    };
  },
};
</script>

<style lang="scss" scoped>
.storeManagement {
  width: 100%;
  height: 100vh;
  border-radius: 8px;
  margin: 20px 10px 20px 0;
  padding: 20px;
  background-color: #fff;
  > header {
    display: flex;
    justify-content: space-between;
    height: 50px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 30px;
    padding-right: 50px;
    > span {
      font-size: 18px;
      font-weight: 600;
    }
  }
}
.storeInfor {
  display: flex;
  justify-content: space-between;
  .tableC {
    width: 100%;
    border: 1px solid #c9c9c9;
  }
  .showData {
    width: 100%;
    border: 1px solid black;
  }
}
</style>